<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${pageTitle}"></title>
    <link rel="stylesheet" type="text/css" th:href="@{{path}/common/webuploader/webuploader.css?v={v}(v=${v},path=${staticPath})}"/>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInLeft">
                    <div class="ibox float-e-margins">
                        <form  method="post" id="importExcelFrom"  enctype="multipart/form-data">
                            <div class="ibox-content">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                    <label  class="col-sm-3 control-label text-right">
                                        <i class="c-red">*</i>
                                        第一步：虚拟商品名称
                                    </label>
                                    <div class="col-sm-8">
                                        <input class="form-control" name="name" maxlength="30">
                                        <p class="m-t">
                                            <span  class="c-999 vam">
                                                商品名称 限30个字符以内，此类商品使用于创建积分兑换商品关联虚拟类商品
                                            </span>
                                            <span class="m-l vam" data-container="body"
                                                  data-html="true"
                                                  data-toggle="popover"
                                                  data-trigger="hover"
                                                  data-placement="bottom"
                                                  th:attrappend="data-content='<img width=400 src='+${staticPath}+'/admin/v3/img/pic/integralCard-example-1.jpg />'">
                                                                        <span class="c-master">示例</span></span>
                                        </p>
                                    </div>
                                </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label text-right">第二步：导入模板</label>
                                        <div class="col-sm-8">
                                            <p>
                                                <a th:href="@{/admin/IntegralCardVoucher/downloadTemplate}">
                                                    <button class="btn btn-primary " type="button">
                                                        <i class="fa fa-image"></i>&nbsp;点击下载模板
                                                    </button>
                                                </a>
                                                <span class="ml10">
                                                    <small class="fs14 c-red">
                                                        <i class="fa fa-lightbulb-o"></i>
                                                        请先下载系统设定好的商品导入模板，整理模板内容后上传模板并批量导入
                                                    </small>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label text-right"><i class="c-red">*</i> 第三步：上传模板文件</label>
                                        <div class="col-sm-8">
                                            <div id="uploader" class="wu-example">
                                                <!--用来存放文件信息-->
                                                <div id="thelist" class="uploader-list"></div>
                                                <div class="m-t-sm">
                                                    <div id="picker" class="inline"> <i class="fa fa-file-excel-o"></i> &nbsp;选择已编辑文件</div>
                                                    <button id="ctlBtn" class="btn  btn-danger m-l-lg" type="button" style="vertical-align: text-bottom;">开始上传</button>
                                                </div>
                                            </div>
                                            <div class="m-t">
                                                <span class="fs14 c-red">
                                                    <i class="fa fa-lightbulb-o"></i>
                                                    说明：
                                                </span>
                                                <p class="m-t m-l fs14 c-red">
                                                    <span class="">1、此功能用于专门针对积分兑换所用的虚拟电子卡，如：会员卡，充值卡等</span>
                                                    <br>
                                                    <span>2、模板中：卡号：设置虚拟卡的卡号、卡密：设置虚拟卡密码</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                </div>
                <div data-th-replace="layout/head-footer"></div>

</div>
<script th:src="@{{path}/common/webuploader/webuploader.js?v={v}(v=${v},path=${staticPath})}"></script>
<script>
    //上传学员
    var uploader = WebUploader.create({
        swf:staticPath + '/static/common/webuploader/Uploader.swf', // swf文件路径
        fileType: 'xls',//文件类型
        accept:{
            title: 'xls',
            extensions: 'xls',
            mimeTypes: 'application/vnd.ms-excel'
        },
        multiple: false,//是否允许上传多个文件
        server: baseloaction+'/admin/IntegralCardVoucher/ajaxImportExcel',// 文件接收服务端。
        pick:{
            //指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点
            id: '#picker',
            //指定按钮文字。不指定时优先从指定的容器中看是否自带文字

            //是否开起同时选择多个文件能力
            multiple:false
        }, // 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.
        resize: false ,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        //指定Drag And Drop拖拽的容器，如果不指定，则不启动
        dnd: '#uploader #thelist',
        //指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.
        //paste: document.body,
        //设置文件上传域的name。
        fileVal:'file'
    });
    // 当有文件被添加进队列的时候
    var  $list = $("#thelist");
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '</div>' );


    });
    //当文件被加入队列之前触发
    uploader.on('uploadBeforeSend', function (obj, data, headers) {
        var name =    $("input[name='name']").val();
        data.shopName= name;
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>').appendTo( $li ).find('.progress-bar');
        }
        $percent.css( 'width', percentage * 100 + '%' );
    });

    //当某个文件上传到服务端响应的回调
    uploader.onUploadAccept = function(object,ret){
        icModale(0,ret.message);
        setTimeout(function(){
            if(ret.success==true){
                    parent.layer.closeAll();
            }else{
                uploader.stop(true);
            }
        },1000)
    };

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });

    //点击上传按钮触发事件
    $("#ctlBtn").click(function(){
        if($('#thelist .item').length>0){
            uploader.upload();
        }else{
            icModale(0,"请选择文件");
        }
    });
</script>
</body>
</html>
